<template>
    <el-card class="application-index">
        <div class="flex justify-between items-center">
            <!-- search -->
            <div class="flex mb-4">
                <el-input placeholder="搜索关键词" class="mr-4" v-model="form.title" clearable></el-input>
                <el-button class="btn-primary" @click="fetchData('desc', true)">搜索</el-button>
            </div>

            <!-- 更换视图btn -->
            <!-- <div class="change-view" v-if="$route.path.includes('finish')" @click="viewTable = !viewTable">
                <i class="iconfont icon-1mulu py-2 px-4 rounded-l-lg" :class="viewTable ? 'active' : 'default'"></i>
                <i class="iconfont el-icon-menu py-2 px-4 rounded-r-lg" :class="!viewTable ? 'active' : 'default'"></i>
            </div> -->
        </div>

        <div v-loading="loading">
            <!-- table list -->
            <help-list
                ref="list"
                @sortBy="fetchData($event)"
                v-model="update"
                v-if="!$route.path.includes('finish') || ($route.path.includes('finish') && viewTable)"
                :source="list"
                :popular="$route.path.includes('finish')"
                :del="$route.path.includes('ready') || $route.path.includes('finish')"
                :modify="$route.path.includes('finish')"
                :cancel="$route.path.includes('wait')">
            </help-list>

            <!-- ul list -->
            <div class="text-right mt-2" v-if="$route.path.includes('finish') && !viewTable">
                <date-dropdown @command="fetchData($event)"></date-dropdown>
            </div>

            <!-- <help-ul-list v-if="$route.path.includes('finish') && !viewTable" :source="list"></help-ul-list> -->
        </div>
        <!-- pagination -->
        <div class="text-center pt-6" v-show="list.length">
            <el-pagination
                @current-change="fetchData('desc')"
                :current-page.sync="form.page"
                :page-size="form.pagesize"
                layout="prev, pager, next"
                :total="form.total">
            </el-pagination>
        </div>
    </el-card>
</template>

<script>
    import {Pagination} from 'element-ui';
    import HelpList from '../../components/widget/HelpList';
    // import HelpUlList from '../../components/widget/HelpUlList';
    import DateDropdown from '../../components/widget/DateDropdown';

    export default {
        components: {
            HelpList,
            // HelpUlList,
            DateDropdown,
            ElPagination: Pagination,
        },
        data() {
            return {
                viewTable: true, // 改变视图 true: table, false: list
                list: [],
                form: {
                    title: '',
                    page: 1,
                    pagesize: 10,
                    total: 1
                },
                update: false,
                loading: false
            };
        },
        watch: {
            '$route'(val, oldVal) {
                this.form.title = '';
                this.fetchData('desc');
            },
            update(val) {
                if (val) this.fetchData('desc');
            },
            'form.title'(val) {
                if (!val) this.fetchData('desc');
            }
        },
        computed: {
            isAdmin() {
                const role = SessionStore.get('loginMesg').role;

                // 管理员、注册用户、认证用户
                let arr = ['5ab07114076547341878f520', '5ab0758f076547341878f521', '5ab07913076547341878f523'];
                return arr.findIndex(el => el === role);
            },
        },
        methods: {
            fetchData(sortBy = 'desc', isSearch = false) {
                this.loading = true;

                // // 判断audit的值
                let status = this.$route.name.split('.')[1];
                switch (status) {
                    case 'Finish':
                        this.form.audit = [2, 3];
                        break;
                    case 'Ready':
                        this.form.audit = 0;
                        break;
                    case 'Wait':
                        this.form.audit = 1;
                        break;
                };

                if (!this.isAdmin) this.form.creatorId = SessionStore.get('userMesg').id;
                this.form.creatorId = SessionStore.get('userMesg').id;
                this.form.sf = 'createTime';
                this.form.so = sortBy.includes('asc') ? 'asc' : 'desc';

                if (isSearch) this.form.page = 1;

                API.get('help/article', {params: this.form})
                    .then(res => {
                        this.list = res.rows;
                        this.form.total = res.total;
                    })
                    .finally(() => {
                        this.update = false;
                        this.loading = false;
                    });
            },
        },
        created() {
            this.fetchData('desc');
        },
        beforeRouteLeave(to, from, next) {
            if (from.name === 'Application.Ready') {
                this.$refs.list.clear();
            }
            next();
        }
    };
</script>

<style lang="scss">
    .application-index {
        .change-view {
            font-size: 0;
            .default {
                color: #02a7fb;
                background: #f2f2f2;
            }

            .active {
                color: #fff;
                background: #02a7fb;
            }
        }

        .el-card__body {
            min-width: 600px;
        }
    }
</style>
